﻿import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Controls.impl 2.14
import QtGraphicalEffects 1.14

// 适配维护校正中分为左右两个部分的按钮

Item {
    id: root

    property color comboBgColor: "#E7F1FF"
    property color comboBgColor_hover: "#1677FF"
    property color comboBorderColor: "#CCCCCC"
    property color comboBorderColor_hover: "#CCCCCC"
    property int comboLeftPadding: 13
    property var model: ["选项1", "选项2", "选项3"]
    property int listItemHeight: 40*dp // 单个Item高度
    property int maxPopupListCount: 4 // 一个页面要展示的最大Item数
    property bool dynamicListHeight: true // 动态下拉框高度(默认开启)
    property int comboCurrentIndex: 0 // 下拉框当前下标 -1未选择


    // popup
    property int popupHeight: getItemListHeight()
    property string popupBgColor: "#FFFFFF"
    property string popupBorderColor: "transparent"
    property int popupBorderWidth: 0
    property int popupRadius: 4
    property int popupSignalItemHeight: 40*dp
    property int popupTopMargin: 2

    // 文字
    property color comboFontColor: "#222"
    property color comboFontColor_hover: "#FFF"
    property string comboFontFamily: "Alibaba PuHuiTi 3.0"
    property int comboFontPixelSize: config.fontsize
    property int comboFontHorAlign: Text.AlignLeft
    property string popUpFontColor: "#222"

    // highlight
    property string highlightColor: "#D4D9FF"
    property string highlightedFontColor: "#2F42CD"


    property string title: ""
    property bool editable: true

    property bool mutex: false

    signal textClicked(var text)


    function getItemListHeight(){
        // 动态下拉框高度
        if(dynamicListHeight){
            // 如果model数量小于maxPopupListCount设定值，则显示model数量高度
            // 否则显示maxPopupListCount设定值
            return model.length < maxPopupListCount ?
                        listItemHeight * model.length :
                        listItemHeight * maxPopupListCount
        }else {
            // 静态高度：直接返回maxPopupListCount设定值
            return listItemHeight * maxPopupListCount
        }
    }

    height: 40*dp
    width: 120*dp

    /* property 定义结束 */


    property bool isLeftButtonHovered: false
    property bool isRightButtonHovered: false

    ComboBox {
        id: control
        height: parent.height
        width: root.width
        model: root.model
        padding: 0


        // 下拉框中每一个选项的代理样式
        delegate: ItemDelegate {
            width: control.width
            height: popupSignalItemHeight
            leftPadding: comboLeftPadding
            background: Rectangle {
                color: control.highlightedIndex === index ? highlightColor : popupBgColor
                MouseArea{
                    anchors.fill: parent
                    onClicked: {
                        root.textClicked(modelData)
                        comboCurrentIndex = index
                        popup.visible = false
                    }
                }
            }

            // 每个代理选项样式
            contentItem: Text {
                text: modelData
                color: control.highlightedIndex === index ? highlightedFontColor : popUpFontColor
//                font: control.font
                font.pixelSize: config.fontsize
                elide: Text.ElideRight
                verticalAlignment: Text.AlignVCenter
            }

            highlighted: control.highlightedIndex === index
        }

        // 显示框文本样式
        contentItem: Text {
            font.pixelSize: config.fontsize
            color: isLeftButtonHovered ? comboFontColor_hover : comboFontColor
            text: model[comboCurrentIndex]
            verticalAlignment: Text.AlignVCenter
            horizontalAlignment: comboFontHorAlign
            leftPadding: comboLeftPadding
            clip: true
        }

        // 显示框背景样式
        background: Rectangle {
            anchors.fill: parent
            color: isLeftButtonHovered ? comboBgColor_hover : comboBgColor
            border.color: isLeftButtonHovered ? comboBorderColor_hover : comboBorderColor
            radius: 3*dp
            property bool isHovered: false
            MouseArea{      // Hover样式
                anchors.fill: parent
                propagateComposedEvents: true
                hoverEnabled: config.hoverEnabled
                cursorShape: Qt.PointingHandCursor
                onEntered: {
                    parent.isHovered = true && config.hoverEnabled
                }onExited: {
                    parent.isHovered = false
                }onPressed:{
                    mouse.accepted = false
                }onReleased:{
                    mouse.accepted = false
                }
            }
            // 阴影
            layer.enabled: control.popup.visible && config.device!==2
            layer.effect: DropShadow {
                radius: 12*dp
                samples: 43
                transparentBorder: true
                color: "#4D1677FA"
            }
        }

        // 向下三角箭头
        indicator: CustomRectangle {
            id: indicatorArw
            width: 25*dp
            height: control.availableHeight - 2
            radius_rb: 3*dp
            radius_rt: 3*dp
            x: control.width - width - 1
            y: 1
            color: isRightButtonHovered ? comboBgColor_hover : comboBgColor
            Rectangle{ height: parent.height; width: 1; color: comboBorderColor }            // 分隔的竖线

            Image {
                height: 20*dp; width: 20*dp
                anchors.centerIn: parent
                source: "qrc:/picture/downarrow.png"
            }
        }

        // 下拉框（Popup）
        popup: Popup {
            id: popup
            width: control.width
            height: popupHeight
            y: control.height + popupTopMargin
            margins: 0
            padding: 0
            // popup的内容
            contentItem: ListView {
                id: listview
                clip: true
//                model: control.popup.visible ? control.delegateModel : null
                model: control.delegateModel
                currentIndex: control.highlightedIndex

            }

            // popup的背景
            background: Rectangle {
                border.color: popupBorderColor
                border.width: popupBorderWidth
                layer.enabled: true  // 设置layer为enable
                // 阴影
                layer.effect: DropShadow {
                    radius: 21*dp
                    samples: 43
                    transparentBorder: true
                    color: "#4D002062"
                }
            }

            // 过渡效果
            enter: Transition {
                NumberAnimation {
                    property: "height"
                    from: 0
                    to: popupHeight
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            }
            exit: Transition {
                NumberAnimation {
                    property: "height"
                    from: popupHeight
                    to: 0
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            }
        }
    }

    Rectangle{
        anchors.fill: control
        color: "#EEEEEE"
        opacity: 0.6
        MouseArea{
            anchors.fill: parent
            onReleased: {

            }
        }
        visible: !editable
    }

    // 控制点击的区域
    // 左边
    MouseArea{
        height: parent.height
        width: parent.width - 25*dp
        hoverEnabled: true
        cursorShape: "PointingHandCursor"
        onEntered: {
            isLeftButtonHovered = true
        }onExited: {
            isLeftButtonHovered = false
        }
        onClicked: {
            textClicked(model[comboCurrentIndex])
        }
    }
    // 右边
    MouseArea{
        anchors.right: parent.right
        height: parent.height
        width: 25*dp
        cursorShape: "PointingHandCursor"
        hoverEnabled: true
        onEntered: {
            isRightButtonHovered = true
        }onExited: {
            isRightButtonHovered = false
        }

        onClicked: {
            popup.visible = true
        }
    }

}
